/// <reference path="../../../Content/shared/_variables-shared.scss" />
/// <reference path="../../../Content/shared/_mixins.scss" />
/// <reference path="_variables.scss" />
/// <reference path="../../../Content/bs4/scss/bootstrap.scss" />


// Responsive Typo
// ==============================================================

@include media-breakpoint-down(md) {
    @if ($font-size-root-md != '16px') {
        html {
            font-size: $font-size-root-md;
        }
    }
}

@include media-breakpoint-down(sm) {
    @if ($font-size-root-sm != '16px') {
        html {
            font-size: $font-size-root-sm;
        }
    }
}

//
// Layout
// --------------------------------------------------

html {
    width: 100%;
    height: 100%;
}

body { 
    background: $site-bg;
    // INFO: Sticky elements won't work anymore with overflow-x: hidden on #page element
    overflow-x: hidden; 

    &.popup { 
        padding: 1.25rem; 
        background: $body-bg;
    }

    &.bare {
        padding: 0;
        margin: 0;
        background: $body-bg;
        border: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

.touchevents body:not(.has-sticky-content) #page {
    // INFO: Sticky elements won't work anymore with overflow-x: hidden on #page element
    // INFO 2: apparently without 'overflow-x: hidden' #page gets very glitchy on mobile. Observe this and leave it active for now.
    overflow-x: hidden;
}  

#header {
    background-color: $header-bg;
}

#content-wrapper {
    min-height: 300px;
}

#content {
    margin-top: var(--content-margin-top, 1.5rem);
    margin-bottom: var(--content-margin-bottom, 1.5rem);
}

.page-main {
    position: relative;
    z-index: 1;
    background: $body-bg;
    box-shadow: 0 0 24px rgba(#000, 0.2);
    min-height: 100vh;
}

@media screen {
    .boxed {
        .page-main {
            margin-left: auto;
            margin-right: auto;
            @include make-container-max-widths();
        }
    
        .page-main .container {
            padding-left: $grid-gutter-width / 2;
            padding-right: $grid-gutter-width / 2;
        }

        @include media-breakpoint-up(sm) {
            .page-main {
                border: 1px solid rgba(#000, 0.2);
                border-top-width: 0;
                border-bottom-width: 0;

                .container {
                    padding-left: $grid-gutter-width;
                    padding-right: $grid-gutter-width;
                }
            }
        }
    }
}

//
// 'Scroll to top' button
// --------------------------------------------------

#scroll-top {
    z-index: 9999;
    position: fixed;
    bottom: 80px;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: $border-radius 0 0 $border-radius;
    border: 1px solid rgba(#000, 0.1);
    border-right-width: 0;
    background: rgba(#fff, 0.9);
    color: $body-color !important;
    text-decoration: none;
    transform: translate3d(100%, 0, 0);
    transition: all .5s ease;
    opacity: 0;

    &.in {
        transform: translate3d(0, 0, 0) !important;
        opacity: 1;
    }
}